<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运费快速计算系统</title>
    <!-- 模块化CSS文件 - 按加载顺序排列 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/strategy.css">
    <link rel="stylesheet" href="css/modal.css">
    <link rel="stylesheet" href="css/freight-calculation.css">
    <script src="libs/vue.global.js"></script>
    <script src="libs/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="app-container">
            <header class="header">
                <h1>运费快速计算系统</h1>
            </header>

            <div class="main-content">
                <nav class="sidebar">
                    <div class="menu-item" :class="{ active: activeTab === 'calculate' }" @click="switchTab('calculate')">运费计算</div>
                    <div class="menu-item" :class="{ active: activeTab === 'strategy' }" @click="switchTab('strategy')">策略管理</div>
                    <div class="menu-item" :class="{ active: activeTab === 'v3-strategy-config' }" @click="switchTab('v3-strategy-config')">策略配置</div>
                    <div class="menu-item" :class="{ active: activeTab === 'assignment' }" @click="switchTab('assignment')">策略分配</div>
                    <div class="menu-item" :class="{ active: activeTab === 'area' }" @click="switchTab('area')">区域管理</div>
                    <div class="menu-item" :class="{ active: activeTab === 'operation-log' }" @click="switchTab('operation-log')">操作日志</div>
                </nav>

                <main class="content-area">
                    <!-- 运费计算页面 -->
                    <div v-if="activeTab === 'calculate'" class="freight-calculation-container">
                        <h2 class="freight-page-title">运费计算</h2>

                        <!-- 运费计算表单 -->
                        <div class="freight-form-card">
                            <form @submit.prevent="calculateFreight">
                                <div class="freight-form-grid">
                                    <div class="freight-form-group">
                                        <label class="freight-form-label">指定策略</label>
                                        <div class="freight-strategy-selector">
                                            <input type="text"
                                                   class="freight-form-input"
                                                   v-model="strategySearchKeyword"
                                                   @input="handleStrategySearch(strategySearchKeyword)"
                                                   @focus="showStrategyOptions(strategySearchKeyword)"
                                                   @blur="hideStrategyDropdown"
                                                   placeholder="输入策略名称搜索或选择...">
                                            <div class="freight-strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length > 0">
                                                <div class="freight-strategy-option"
                                                     v-for="strategy in filteredStrategies"
                                                     :key="strategy.id"
                                                     :class="{ selected: freightForm.strategyId === strategy.id }"
                                                     @mousedown="handleStrategySelection(strategy, 'freightForm')">
                                                    {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                                </div>
                                            </div>
                                            <div class="freight-strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length === 0 && strategySearchKeyword">
                                                <div class="no-strategy-results">未找到相关策略</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="freight-form-group">
                                        <label class="freight-form-label required">目标区域</label>
                                        <div class="freight-area-selector-container" @mouseleave="handleAreaSelectorMouseLeave">
                                            <div class="freight-area-selector-input" @click="toggleAreaSelector">
                                                <span :class="{ 'placeholder': !freightForm.toAreaId }">{{ getSelectedAreaText() }}</span>
                                                <span class="freight-area-selector-arrow" :class="{ 'expanded': showAreaSelector }">▼</span>
                                            </div>

                                            <!-- 三级联动面板 -->
                                            <div v-if="showAreaSelector" class="area-selector-panel" @click.stop @mouseenter="handleAreaSelectorMouseEnter">
                                                <!-- 省份列 -->
                                                <div class="area-column">
                                                    <div class="area-column-header">省份 <small style="color: #999;"></small></div>
                                                    <div class="area-options">
                                                        <div v-for="(province, index) in areaTree" :key="'province-' + province.id + '-' + index"
                                                             class="area-option-container"
                                                             :class="{
                                                                 'selected': freightForm.toAreaId && String(freightForm.toAreaId) === String(province.id)
                                                             }">
                                                            <div class="area-option-content">
                                                                <span class="area-name"
                                                                      @click="expandProvince(province)"
                                                                      :title="province && province.name ? ('点击展开 ' + province.name) : '点击展开'">
                                                                    {{ province && province.name ? province.name : '未知省份' }}
                                                                    <small v-if="province && province.children && province.children.length > 0" style="color: #999; margin-left: 5px;">></small>
                                                                </span>
                                                                <button class="area-select-btn"
                                                                        @click="selectProvince(province)"
                                                                        :title="province && province.name ? ('选择 ' + province.name) : '选择'"
                                                                        :class="{ 'selected': freightForm.toAreaId && String(freightForm.toAreaId) === String(province.id) }"
                                                                        :disabled="!province || !province.id">
                                                                    {{ freightForm.toAreaId && String(freightForm.toAreaId) === String(province.id) ? '✓' : '选择' }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- 城市列 -->
                                                <div v-if="selectedProvince && selectedProvince.children.length > 0" class="area-column">
                                                    <div class="area-column-header">城市 <small style="color: #999;"></small></div>
                                                    <div class="area-options">
                                                        <div v-for="city in selectedProvince.children" :key="city.id"
                                                             class="area-option-container"
                                                             :class="{
                                                                 'selected': freightForm.toAreaId && String(freightForm.toAreaId) === String(city.id)
                                                             }">
                                                            <div class="area-option-content">
                                                                <span class="area-name"
                                                                      @click="expandCity(city)"
                                                                      :title="city && city.name ? ('点击展开 ' + city.name) : '点击展开'">
                                                                    {{ city && city.name ? city.name : '未知城市' }}
                                                                    <small v-if="city && city.children && city.children.length > 0" style="color: #999; margin-left: 5px;">></small>
                                                                </span>
                                                                <button class="area-select-btn"
                                                                        @click="selectCity(city)"
                                                                        :title="city && city.name ? ('选择 ' + city.name) : '选择'"
                                                                        :class="{ 'selected': freightForm.toAreaId && String(freightForm.toAreaId) === String(city.id) }"
                                                                        :disabled="!city || !city.id">
                                                                    {{ freightForm.toAreaId && String(freightForm.toAreaId) === String(city.id) ? '✓' : '选择' }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- 区县列 -->
                                                <div v-if="selectedCity && selectedCity.children.length > 0" class="area-column">
                                                    <div class="area-column-header">区县 <small style="color: #999;"></small></div>
                                                    <div class="area-options">
                                                        <div v-for="district in selectedCity.children" :key="district.id"
                                                             class="area-option"
                                                             :class="{ 'selected': freightForm.toAreaId && String(freightForm.toAreaId) === String(district.id) }"
                                                             @click="selectDistrict(district)"
                                                             :title="district && district.name ? ('点击选择 ' + district.name) : '点击选择'">
                                                            {{ district && district.name ? district.name : '未知区县' }}
                                                            <small v-if="freightForm.toAreaId && String(freightForm.toAreaId) === String(district.id)" style="color: #409eff; margin-left: 5px;">✓ 已选择</small>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- 空状态提示 -->
                                                <div v-if="areaTree.length === 0" class="area-selector-empty">
                                                    正在加载区域数据...
                                                </div>
                                            </div>

                                            <!-- 清空按钮 -->
                                            <button v-if="freightForm.toAreaId" type="button" class="area-clear-btn" @click="clearAreaSelection">×</button>
                                        </div>
                                    </div>

                                    <!-- 地址层级匹配字段（新增） -->

<!--
                                    <div class="form-group">
                                        <label class="form-label">目标省份</label>
                                        <input type="text" class="form-input" v-model="freightForm.toProvinceName"
                                               placeholder="例如：北京市、广东省（可选，用于地址层级匹配）">
                                        <small class="form-hint">支持地址层级匹配，优先精确匹配具体层级</small>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">目标城市</label>
                                        <input type="text" class="form-input" v-model="freightForm.toCityName"
                                               placeholder="例如：北京市、广州市（可选，与省份配合使用）">
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">目标区县</label>
                                        <input type="text" class="form-input" v-model="freightForm.toDistrictName"
                                               placeholder="例如：朝阳区、天河区（可选，最精确匹配）">
                                    </div>
                                        -->
                                    <div class="freight-form-group">
                                        <label class="freight-form-label">仓库编码</label>
                                        <input type="text" class="freight-form-input" v-model="freightForm.warehouseCode"  placeholder="例如：WH001, WH_SHANGHAI" >
                                    </div>
                                    <div class="freight-form-group">
                                        <label class="freight-form-label">物流公司编码</label>
                                        <input type="text" class="freight-form-input" v-model="freightForm.logisticsCompanyCode" placeholder="例如：SF(顺丰), YTO(圆通), ZTO(中通), EMS, JD(京东)">
                                    </div>

                                    <div class="freight-form-group">
                                        <label class="freight-form-label required">货物重量 (kg)</label>
                                        <input type="number" class="freight-form-input" v-model.number="freightForm.weight" step="0.1" min="0.0" placeholder="请输入货物重量" required>
                                    </div>
                                    <div class="freight-form-group">
                                        <label class="freight-form-label">货物长度 (cm)</label>
                                        <input type="number" class="freight-form-input" v-model.number="freightForm.length" step="0.1" min="0.0" placeholder="请输入货物长度">
                                    </div>
                                    <div class="freight-form-group">
                                        <label class="freight-form-label">货物宽度 (cm)</label>
                                        <input type="number" class="freight-form-input" v-model.number="freightForm.width" step="0.1" min="0.0" placeholder="请输入货物宽度">
                                    </div>
                                    <div class="freight-form-group">
                                        <label class="freight-form-label">货物高度 (cm)</label>
                                        <input type="number" class="freight-form-input" v-model.number="freightForm.height" step="0.1" min="0.0" placeholder="请输入货物高度">
                                    </div>
                                </div>

                                <div class="freight-form-actions">
                                    <button type="submit" class="freight-btn-calculate" :class="{ 'freight-calculating': calculating }" :disabled="calculating">
                                        {{ calculating ? '计算中...' : '计算运费' }}
                                    </button>
                                    <button type="button" class="freight-btn-reset" @click="resetFreightForm">重置</button>
                                </div>
                            </form>
                        </div>

                        <!-- 运费计算结果 -->
                        <div v-if="freightResult" class="freight-result-container">
                            <!-- 结果标题栏 -->
                            <div class="freight-result-header">
                                <h3 class="freight-result-title">运费计算结果</h3>
                            </div>

                            <!-- 运费总额 -->
                            <div class="freight-result-amount">
                                <div class="freight-amount-label">运费总额</div>
                                <div class="freight-amount-value">¥{{ freightResult.freight }}</div>
                            </div>

                            <!-- 计算明细 -->
                            <div class="freight-result-details">
                                <h4 class="freight-details-title">计算明细</h4>

                                <div class="freight-detail-item" v-if="freightResult.actualWeight">
                                    <span class="freight-detail-label">实际重量</span>
                                    <span class="freight-detail-value">{{ freightResult.actualWeight }}kg</span>
                                </div>

                                <div class="freight-detail-item" v-if="freightResult.volumetricWeight && freightResult.volumetricWeight > 0">
                                    <span class="freight-detail-label">体积重量</span>
                                    <span class="freight-detail-value">{{ freightResult.volumetricWeight }}kg</span>
                                </div>

                                <div class="freight-detail-item">
                                    <span class="freight-detail-label">计费重量</span>
                                    <span class="freight-detail-value highlight">{{ freightResult.chargeableWeight }}kg</span>
                                </div>

                                <div class="freight-detail-item">
                                    <span class="freight-detail-label">使用策略</span>
                                    <span class="freight-detail-value">{{ freightResult.strategyName }}</span>
                                </div>

                                <div class="freight-detail-item" v-if="freightResult.usedWeightSegment">
                                    <span class="freight-detail-label">计费模式</span>
                                    <span class="freight-detail-value">重量区间规则</span>
                                </div>
                                <div class="freight-detail-item" v-else>
                                    <span class="freight-detail-label">计费模式</span>
                                    <span class="freight-detail-value">首重续重</span>
                                </div>

                                <!-- 计算公式 -->
                                <div class="freight-calculation-formula" v-if="freightResult.detailedFormula">
                                    <div class="freight-formula-title" @click="toggleFormulaDetails">
                                        🗺 详细计算公式
                                        <span class="formula-toggle-icon" :class="{ 'collapsed': !showFormulaDetails }">▼</span>
                                    </div>
                                    <div class="freight-formula-content detailed-formula" v-show="showFormulaDetails">{{ freightResult.detailedFormula }}</div>
                                </div>
                                <div class="freight-calculation-formula" v-else-if="freightResult.calculationDetail">
                                    <div class="freight-formula-title" @click="toggleFormulaDetails">
                                        🗺 计算公式
                                        <span class="formula-toggle-icon" :class="{ 'collapsed': !showFormulaDetails }">▼</span>
                                    </div>
                                    <div class="freight-formula-content" v-show="showFormulaDetails">{{ freightResult.calculationDetail }}</div>
                                </div>
                            </div>
                        </div>

                        <!-- 错误和成功消息 -->
                        <div v-if="error" class="freight-message error">{{ error }}</div>
                        <div v-if="successMsg" class="freight-message success">{{ successMsg }}</div>
                    </div>

                    <!-- 策略管理页面 -->
                    <div v-if="activeTab === 'strategy'">
                        <h2 class="page-title">运费策略管理</h2>

                        <!-- 查询表单 -->
                        <div class="card">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label">策略名称</label>
                                    <input type="text" class="form-input" v-model="strategyQuery.name" placeholder="输入策略名称进行模糊搜索">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">计费模式</label>
                                    <select class="form-input" v-model="strategyQuery.pricingModel">
                                        <option value="">全部</option>
                                        <option value="1">首重续重</option>
                                        <option value="2">首重续重+重量区间</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">状态</label>
                                    <select class="form-input" v-model="strategyQuery.status">
                                        <option value="">全部</option>
                                        <option value="1">启用</option>
                                        <option value="2">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-primary" @click="searchStrategies">搜索</button>
                                <button class="btn" @click="resetStrategyQuery">重置</button>
                            </div>
                        </div>

                        <div class="actions">
                            <button class="btn btn-primary" @click="addStrategy">新增策略</button>
                            <button class="btn" @click="loadStrategies">刷新</button>
                        </div>
                        <div class="card">
                            <table class="table" v-if="strategiesComputed.length > 0" :key="'strategies-' + forceUpdateFlag">
                                <thead><tr><th>ID</th><th>策略名称</th><th>描述说明</th><th>计费模式</th><th>状态</th><th>操作</th></tr></thead>
                                <tbody>
                                    <tr v-for="strategy in strategiesComputed" :key="strategy.id">
                                        <td>{{ strategy && strategy.id ? strategy.id : '-' }}</td>
                                        <td>{{ strategy && strategy.name ? strategy.name : '未知策略' }}</td>
                                        <td>{{ strategy && strategy.description ? strategy.description : '' }}</td>
                                        <td>{{ strategy && strategy.pricingModel ? (strategy.pricingModel === 1 ? '首重续重' : '首重续重+重量区间') : '-' }}</td>
                                        <td><span :class="strategy && strategy.status ? getStrategyStatusClass(strategy.status) : ''">{{ strategy && strategy.status ? getStrategyStatusText(strategy.status) : '-' }}</span></td>
                                        <td>
                                            <button class="btn btn-primary" @click="editStrategy(strategy)" :disabled="!strategy || !strategy.id">编辑</button>
                                            <button class="btn btn-warning" @click="copyAndCreateStrategy(strategy)" :disabled="!strategy || !strategy.id" style="margin: 0 5px;">复制并新建</button>
                                            <button :class="strategy && strategy.status === 1 ? 'btn btn-danger' : 'btn btn-success'" @click="toggleStrategyStatus(strategy)" :disabled="!strategy || !strategy.id">
                                                {{ strategy && strategy.status === 1 ? '禁用' : '启用' }}
                                            </button>
                                            <button class="btn btn-danger" @click="deleteStrategy(strategy && strategy.id ? strategy.id : null)" :disabled="!strategy || !strategy.id" style="margin: 0 5px;">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div v-else class="loading" :key="'no-data-' + forceUpdateFlag">暂无数据</div>
                        </div>
                    </div>

                    <!-- V3策略配置页面 -->
                    <div v-if="activeTab === 'v3-strategy-config'">
                        <h2 class="page-title">策略配置管理</h2>

                        <!-- 操作按钮 -->
                        <div class="actions">
                            <button class="btn btn-primary" @click="addStrategy">添加策略</button>
                            <button class="btn btn-success" @click="exportStrategy">导出策略</button>
                            <button class="btn btn-warning" @click="importStrategy">导入策略</button>
                            <button class="btn btn-danger" @click="deleteStrategy(v3CurrentStrategy && v3CurrentStrategy.id ? v3CurrentStrategy.id : null)" :disabled="!v3CurrentStrategy || !v3CurrentStrategy.id">删除策略</button>
                            <button class="btn" @click="refreshData">刷新</button>
                        </div>

                        <!-- V3策略配置主容器 -->
                        <div id="v3-strategy-config-container" class="v3-config-layout">
                            <!-- 左侧：策略列表 -->
                            <div class="v3-left-panel">
                                <div class="panel-header">
                                    <h4>策略列表</h4>
                                </div>
                                <div class="panel-content" id="v3-strategy-list">
                                    <div class="loading">正在加载策略列表...</div>
                                </div>
                            </div>

                            <!-- 右侧：上下布局容器 -->
                            <div class="v3-right-container">
                                <!-- 上方：地区配置管理 -->
                                <div class="v3-center-panel">
                                    <div class="panel-header">
                                        <h4>地区配置管理</h4>
                                        <span class="view-mode-label">查看模式</span>
                                    </div>
                                    <div class="panel-content" id="v3-area-display">
                                        <div class="empty-state">请先选择一个策略</div>
                                    </div>
                                </div>

                                <!-- 下方：重量区间规则 -->
                                <div class="v3-right-panel">
                                    <div class="panel-header">
                                        <h4>重量区间规则</h4>
                                        <span class="view-mode-label">查看模式</span>
                                    </div>
                                    <div class="panel-content" id="v3-pricing-rules">
                                        <div class="empty-state">请先选择一个策略</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="activeTab === 'weight-rules'">
                        <h2 class="page-title">重量区间规则管理</h2>

                        <!-- 策略选择和操作按钮 -->
                        <div class="card">
                            <div class="content-header">
                                <div class="form-group" style="margin-bottom: 0; flex: 1; max-width: 400px;">
                                    <label class="form-label">策略名称搜索</label>
                                    <div class="strategy-selector">
                                        <input type="text"
                                               class="strategy-search-input"
                                               v-model="weightRulesSearchKeyword"
                                               @input="handleWeightRulesStrategySearch(weightRulesSearchKeyword)"
                                               @focus="showWeightRulesStrategyOptions(weightRulesSearchKeyword)"
                                               @blur="hideWeightRulesStrategyDropdown"
                                               placeholder="输入策略名称搜索...">
                                        <div class="strategy-dropdown" v-if="showWeightRulesStrategyDropdown && filteredWeightRulesStrategies.length > 0">
                                            <div class="strategy-option"
                                                 v-for="strategy in filteredWeightRulesStrategies"
                                                 :key="strategy.id"
                                                 @mousedown="handleWeightRulesStrategySelection(strategy)">
                                                {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                            </div>
                                        </div>
                                        <div class="strategy-dropdown" v-if="showWeightRulesStrategyDropdown && filteredWeightRulesStrategies.length === 0 && weightRulesSearchKeyword">
                                            <div class="no-strategy-results">未找到相关策略</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="content-actions">
                                    <button class="btn" @click="loadWeightRules">刷新</button>
                                </div>
                            </div>
                        </div>

                        <!-- 重量规则布局 -->
                        <div class="mapping-layout">
                            <!-- 左侧：策略列表 -->
                            <div class="mapping-sidebar">
                                <div class="sidebar-header">
                                    <h4>策略列表</h4>
                                </div>
                                <div class="sidebar-content">
                                    <div class="strategy-list" v-if="strategies && strategies.length > 0">
                                        <div v-for="strategy in strategies"
                                             :key="strategy.id"
                                             :class="{ 'selected-strategy': selectedStrategyId == strategy.id }"
                                             class="strategy-item strategy-item-with-button">
                                            <span class="strategy-name" @click="selectWeightRulesStrategy(strategy)">{{ strategy.name }}</span>
                                            <button class="btn btn-primary btn-small strategy-add-rule-btn"
                                                    @click="addWeightRuleForStrategy(strategy)"
                                                    :title="'为策略' + strategy.name + '新增规则'">新增规则</button>
                                        </div>
                                    </div>
                                    <div v-else class="loading">正在加载策略列表...</div>
                                </div>
                            </div>

                            <!-- 右侧：重量规则详情 -->
                            <div class="mapping-content">
                                <div class="content-body">
                                    <div v-if="selectedStrategyId">
                                        <table class="table" v-if="weightRules.length > 0">
                                            <thead>
                                                <tr>
                                                    <th>重量上限</th>
                                                    <th>邮资</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="rule in weightRules" :key="rule.id">
                                                    <td>≤{{ rule.upperBound }} kg</td>
                                                    <td>{{ rule.freight }} 元</td>
                                                    <td>
                                                        <button class="btn btn-primary btn-small" @click="editWeightRule(rule)" style="margin-right: 8px;">编辑</button>
                                                        <button class="btn btn-danger btn-small" @click="deleteWeightRule(rule.id)">删除</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div v-else class="loading">该策略下暂无重量规则</div>
                                    </div>
                                    <div v-else class="loading">请先选择策略查看重量规则</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 策略映射页面 -->
                    <div v-if="activeTab === 'mapping'">
                        <h2 class="page-title">策略区域映射管理</h2>
                        <div class="actions">
                            <!--<button class="btn btn-primary" @click="addMapping">新增映射</button>-->
                            <button class="btn btn-success" @click="addBatchMappings">批量新增映射</button>
                            <button class="btn" @click="loadMappings">刷新</button>
                        </div>

                        <!-- 策略选择和查询条件 -->
                        <div class="card">
                            <div class="form-grid form-grid-compact">
                                <div class="form-group form-group-compact">
                                    <label class="form-label">策略名称</label>
                                    <div class="strategy-selector strategy-selector-compact">
                                        <input type="text"
                                               class="strategy-search-input"
                                               v-model="strategySearchKeyword"
                                               @input="handleStrategySearch(strategySearchKeyword)"
                                               @focus="showStrategyOptions(strategySearchKeyword)"
                                               @blur="hideStrategyDropdown"
                                               placeholder="输入策略名称搜索...">
                                        <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length > 0">
                                            <div class="strategy-option"
                                                 v-for="strategy in filteredStrategies"
                                                 :key="strategy.id"
                                                 @mousedown="handleStrategySelection(strategy, 'selectedMappingStrategyId')">
                                                {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group form-group-compact">
                                    <label class="form-label">区域名称</label>
                                    <input type="text" class="form-input form-input-compact" v-model="mappingQuery.areaName" placeholder="输入区域名称进行筛选">
                                </div>
                            </div>
                        </div>

                        <!-- 映射布局 - 三栏布局 -->
                        <div class="mapping-layout-three-column">
                            <!-- 左侧：策略列表及操作 -->
                            <div class="mapping-left-panel">
                                <div class="panel-header">
                                    <h4>策略列表</h4>
                                </div>

                                <!-- 策略操作按钮 -->
                                <div class="strategy-actions">
                                    <button class="btn btn-primary btn-small" @click="addStrategy">
                                        导出策略
                                    </button>
                                    <button class="btn btn-success btn-small" @click="addStrategy">
                                        导入策略
                                    </button>
                                    <button class="btn btn-danger btn-small" @click="deleteStrategy(selectedMappingStrategyId)" :disabled="!selectedMappingStrategyId">
                                        删除策略
                                    </button>
                                    <button class="btn btn-warning btn-small"
                                            @click="editSelectedStrategy"
                                            :disabled="!selectedMappingStrategyId"
                                            title="编辑当前选中的策略">
                                        编辑策略
                                    </button>
                                </div>

                                <!-- 策略列表 -->
                                <div class="panel-content">
                                    <div class="strategy-list" v-if="strategies && strategies.length > 0">
                                        <div v-for="strategy in strategies"
                                             :key="strategy.id"
                                             :class="{ 'selected-strategy': selectedMappingStrategyId == strategy.id }"
                                             class="strategy-item"
                                             @click="selectStrategyFromList(strategy)">
                                            <div class="strategy-info">
                                                <div class="strategy-name">{{ strategy.name }}</div>
                                                <div class="strategy-time">创建时间：{{ formatDate(strategy.createTime) }}</div>
                                                <div class="strategy-note">备注：{{ strategy.description || '无' }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else class="loading">正在加载策略列表...</div>
                                </div>
                            </div>

                            <!-- 中间：地区显示 -->
                            <div class="mapping-center-panel">
                                <div class="panel-header">
                                    <h4>地区</h4>
                                </div>
                                <div class="panel-content">
                                    <div class="area-display" v-if="selectedMappingStrategyId">
                                        <!-- 地区列表显示 -->
                                        <div class="area-groups" v-if="mappingGroupByAreaData.length > 0">
                                            <div v-for="areaGroup in mappingGroupByAreaData"
                                                 :key="areaGroup.areaId"
                                                 class="area-group-item">
                                                <div class="area-info">
                                                    <div class="area-name">{{ areaGroup.areaName }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-else class="empty-area">
                                            该策略下暂无地区映射
                                        </div>
                                    </div>
                                    <div v-else class="empty-strategy">
                                        请先选择策略
                                    </div>
                                </div>
                            </div>

                            <!-- 右侧：计费规则 -->
                            <div class="mapping-right-panel">
                                <div class="panel-header">
                                    <h4>计费规则</h4>
                                </div>

                                <div class="panel-content">
                                    <!-- 计费规则表格 -->
                                    <div class="pricing-rules-table" v-if="selectedMappingStrategyId && mappingGroupByAreaData.length > 0">
                                        <table class="pricing-table">
                                            <thead>
                                                <tr>
                                                    <th rowspan="2">重量范围(kg)</th>
                                                    <th rowspan="2">重量(kg)</th>
                                                    <th rowspan="2">首费(元)</th>
                                                    <th rowspan="2">续重(kg)</th>
                                                    <th rowspan="2">续费(元)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <!-- 显示所有重量区间规则 -->
                                                <tr v-for="(weightRule, index) in allWeightRules" :key="weightRule.id">
                                                    <td>{{ formatWeightRange(weightRule, index) }}</td>
                                                    <td>{{ weightRule.upperBound }}</td>
                                                    <td>{{ getFirstWeightFee(weightRule) }}</td>
                                                    <td>{{ getAdditionalWeight(weightRule) }}</td>
                                                    <td>{{ getAdditionalFee(weightRule) }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div v-else class="empty-rules">
                                        {{ selectedMappingStrategyId ? '该策略下暂无计费规则' : '请先选择策略' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 策略区域配置页面 -->
                    <div v-if="activeTab === 'area-config'">
                        <h2 class="page-title">策略区域配置管理</h2>

                        <!-- 策略选择 -->
                        <div class="card">
                            <div class="form-group">
                                <label class="form-label">选择策略</label>
                                <div class="strategy-selector">
                                    <input type="text"
                                           class="strategy-search-input"
                                           v-model="strategySearchKeyword"
                                           @input="handleStrategySearch(strategySearchKeyword)"
                                           @focus="showStrategyOptions(strategySearchKeyword)"
                                           @blur="hideStrategyDropdown"
                                           placeholder="输入策略名称搜索...">
                                    <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length > 0">
                                        <div class="strategy-option"
                                             v-for="strategy in filteredStrategies"
                                             :key="strategy.id"
                                             @mousedown="handleAreaConfigStrategySelection(strategy)">
                                            {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                        </div>
                                    </div>
                                    <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length === 0 && strategySearchKeyword">
                                        <div class="no-strategy-results">未找到相关策略</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 三栏布局 -->
                        <div class="area-config-layout" v-if="selectedAreaConfigStrategyId">
                            <!-- 左侧：区域列表 -->
                            <div class="area-config-sidebar">
                                <div class="sidebar-header">
                                    <h4>运送区域列表</h4>
                                </div>
                                <div class="sidebar-content">
                                    <div class="area-list" v-if="strategyAreaDetails && strategyAreaDetails.length > 0">
                                        <div v-for="areaDetail in strategyAreaDetails"
                                             :key="areaDetail.areaId"
                                             :class="{ 'selected-area': selectedAreaConfigAreaId == areaDetail.areaId }"
                                             @click="selectAreaForConfig(areaDetail)"
                                             class="area-item">
                                            <span class="area-name">{{ areaDetail.areaName }}</span>
                                            <span class="area-status" :class="areaDetail.configured ? 'configured' : 'unconfigured'">
                                                {{ areaDetail.configured ? '已配置' : '未配置' }}
                                            </span>
                                        </div>
                                    </div>
                                    <div v-else class="loading">请先选择策略查看区域列表</div>
                                </div>
                            </div>

                            <!-- 中间：计算规则 -->
                            <div class="area-config-center">
                                <div class="center-header">
                                    <h4>计算规则</h4>
                                    <div class="center-actions" v-if="selectedAreaDetail">
                                        <button class="btn btn-primary btn-small" @click="startEditingAreaConfig" v-if="!isEditingAreaConfig">编辑</button>
                                        <button class="btn btn-success btn-small" @click="saveAreaConfig" v-if="isEditingAreaConfig" :disabled="savingAreaConfig">保存</button>
                                        <button class="btn btn-small" @click="cancelEditingAreaConfig" v-if="isEditingAreaConfig">取消</button>
                                    </div>
                                </div>
                                <div class="center-content">
                                    <div v-if="selectedAreaDetail" class="config-form">
                                        <div class="form-group">
                                            <label class="form-label">首重重量 (kg)</label>
                                            <input type="number" class="form-input"
                                                   v-model.number="areaConfigForm.firstWeightKg"
                                                   :disabled="!isEditingAreaConfig"
                                                   step="0.1" min="0">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">首重费用 (元)</label>
                                            <input type="number" class="form-input"
                                                   v-model.number="areaConfigForm.firstWeightFee"
                                                   :disabled="!isEditingAreaConfig"
                                                   step="0.01" min="0">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">续重重量 (kg)</label>
                                            <input type="number" class="form-input"
                                                   v-model.number="areaConfigForm.additionalWeightKg"
                                                   :disabled="!isEditingAreaConfig"
                                                   step="0.1" min="0">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">续重费用 (元)</label>
                                            <input type="number" class="form-input"
                                                   v-model.number="areaConfigForm.additionalWeightFee"
                                                   :disabled="!isEditingAreaConfig"
                                                   step="0.01" min="0">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">抛重比</label>
                                            <input type="number" class="form-input"
                                                   v-model.number="areaConfigForm.volumetricWeightRatio"
                                                   :disabled="!isEditingAreaConfig"
                                                   step="1" min="0"
                                                   placeholder="例如：6000">
                                        </div>
                                    </div>
                                    <div v-else class="config-placeholder">
                                        请在左侧选择一个区域查看配置
                                    </div>
                                </div>
                            </div>

                            <!-- 右侧：重量区间规则 -->
                            <div class="area-config-right">
                                <div class="right-header">
                                    <h4>重量区间规则</h4>
                                    <div class="right-actions" v-if="selectedAreaDetail && isEditingAreaConfig">
                                        <button class="btn btn-success btn-small" @click="showAddWeightSegmentRule">新增规则</button>
                                    </div>
                                </div>
                                <div class="right-content">
                                    <div v-if="selectedAreaDetail && currentWeightSegmentRules.length > 0">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>重量(kg)</th>
                                                    <th>资费(元)</th>
                                                    <th v-if="isEditingAreaConfig">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(rule, index) in currentWeightSegmentRules" :key="rule.id || index">
                                                    <td>≤{{ rule.upperBound }}</td>
                                                    <td>{{ rule.freight }}</td>
                                                    <td v-if="isEditingAreaConfig">
                                                        <button class="btn btn-primary btn-small" @click="editWeightSegmentRule(rule, index)">编辑</button>
                                                        <button class="btn btn-danger btn-small" @click="removeWeightSegmentRule(index)">删除</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div v-else-if="selectedAreaDetail" class="weight-rules-placeholder">
                                        暂无重量区间规则
                                    </div>
                                    <div v-else class="weight-rules-placeholder">
                                        请先选择区域查看重量规则
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 未选择策略的提示 -->
                        <div v-else class="card">
                            <div class="empty-state">
                                <p>请先选择一个策略开始配置区域参数</p>
                            </div>
                        </div>
                    </div>


                    <!-- 策略分配页面 -->
                    <div v-if="activeTab === 'assignment'">
                        <h2 class="page-title">策略分配管理</h2>

                        <!-- 查询表单 -->
                        <div class="card">
                            <div class="form-grid">
                                 <div class="form-group">
                                    <label class="form-label">策略名称</label>
                                    <input type="text" class="form-input" v-model="assignmentQuery.strategyName" placeholder="输入策略名称">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">仓库编码</label>
                                    <input type="text" class="form-input" v-model="assignmentQuery.warehouseCode" placeholder="输入仓库编码">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">物流公司编码</label>
                                    <input type="text" class="form-input" v-model="assignmentQuery.logisticsCompanyCode" placeholder="输入物流公司编码">
                                </div>

                                <div class="form-group">
                                    <label class="form-label">状态</label>
                                    <select class="form-input" v-model="assignmentQuery.status">
                                        <option value="">全部</option>
                                        <option value="1">启用</option>
                                        <option value="2">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-primary" @click="searchAssignments">搜索</button>
                                <button class="btn" @click="resetAssignmentQuery">重置</button>
                            </div>
                        </div>

                        <div class="actions">
                            <button class="btn btn-primary" @click="addAssignment">新增分配</button>
                            <button class="btn btn-success" @click="addBatchAssignments">批量分配</button>
                            <button class="btn btn-danger" @click="batchDeleteAssignments" v-if="selectedAssignmentIds.length > 0">批量删除</button>
                            <button class="btn" @click="loadAssignments">刷新</button>
                        </div>
                        <div class="card">
                            <table class="table" v-if="getDisplayAssignments().length > 0">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" :checked="allAssignmentsSelected" @change="toggleAllAssignments"></th>
                                        <th>策略名称</th><th>仓库编码</th><th>物流公司编码</th><th>状态</th><th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="assignment in getDisplayAssignments()" :key="assignment.id">
                                        <td><input type="checkbox" :value="assignment.id" v-model="selectedAssignmentIds"></td>
                                        <td>{{ assignment.strategyName }}</td>
                                        <td>{{ assignment.warehouseCode }}</td>
                                        <td>{{ assignment.logisticsCompanyCode }}</td>
                                        <td><span :class="getAssignmentStatusClass(assignment.status)">{{ getAssignmentStatusText(assignment.status) }}</span></td>
                                        <td>
                                            <button class="btn btn-small" :class="assignment.status === 1 ? 'btn-danger' : 'btn-success'" @click="toggleAssignmentStatus(assignment)">
                                                {{ assignment.status === 1 ? '禁用' : '启用' }}
                                            </button>
                                            <button class="btn btn-small btn-danger" @click="deleteAssignment(assignment.id)" style="margin-left: 8px;">
                                                删除
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div v-else class="loading">暂无数据</div>
                        </div>
                    </div>

                    <!-- 区域管理页面 -->
                    <div v-if="activeTab === 'area'">
                        <h2 class="page-title">区域管理</h2>

                        <!-- 查询表单 -->
                        <div class="card">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label">层级</label>
                                    <select class="form-input" v-model="areaQuery.level">
                                        <option value="">全部</option>
                                        <option value="1">省级</option>
                                        <option value="2">市级</option>
                                        <option value="3">区县级</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">省份</label>
                                    <input type="text" class="form-input" v-model="areaQuery.provinceName" @keyup.enter="searchAreasWithPage" placeholder="输入省份名称">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">城市</label>
                                    <input type="text" class="form-input" v-model="areaQuery.cityName" @keyup.enter="searchAreasWithPage" placeholder="输入城市名称">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">区县</label>
                                    <input type="text" class="form-input" v-model="areaQuery.districtName" @keyup.enter="searchAreasWithPage" placeholder="输入区县名称">
                                </div>
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-primary" @click="searchAreasWithPage">搜索</button>
                                <button class="btn" @click="resetAreaQuery">重置</button>
                            </div>
                        </div>

                        <div class="actions">
                            <button class="btn btn-primary" @click="addArea">新增区域</button>
                            <button class="btn btn-success" @click="exportAreas">导出区域</button>
                            <button class="btn" @click="loadAreasWithPage">刷新</button>
                        </div>
                        <div class="card">
                            <table class="table" v-if="areas.length > 0">
                                <thead><tr><th>ID</th><th>层级</th><th>省份</th><th>城市</th><th>区县</th><th>操作</th></tr></thead>
                                <tbody>
                                <tr v-for="area in areas" :key="area.id">
                                    <td>{{ area.areaId || area.id }}</td>
                                    <td>{{ getAreaLevelName(area.level) }}</td>
                                    <td>{{ area.provinceName }}</td>
                                    <td>{{ area.cityName || '-' }}</td>
                                    <td>{{ area.districtName || '-' }}</td>
                                    <td>
                                        <button class="btn btn-primary" @click="editArea(area)">编辑</button>
                                        <button class="btn btn-danger" @click="deleteArea(area.areaId || area.id)">删除</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <!-- 分页控件 -->
                            <div class="pagination-container" v-if="areaPagination.totalPages > 1">
                                <div class="pagination-info">
                                    共 {{ areaPagination.totalItems }} 条数据，第 {{ areaPagination.currentPage }} / {{ areaPagination.totalPages }} 页
                                </div>
                                <div class="pagination-controls">
                                    <!-- 首页按钮 -->
                                    <button class="btn btn-small" @click="goToPage(1)" :disabled="areaPagination.currentPage === 1" title="首页">首页</button>

                                    <!-- 上一页按钮 -->
                                    <button class="btn btn-small" @click="previousPage()" :disabled="areaPagination.currentPage === 1">上一页</button>

                                    <!-- 页码按钮 -->
                                    <template v-for="page in getPageNumbers()" :key="page">
                                        <button
                                            v-if="page !== '...'"
                                            class="btn btn-small"
                                            :class="{ 'btn-primary': page === areaPagination.currentPage }"
                                            @click="goToPage(page)"
                                        >
                                            {{ page }}
                                        </button>
                                        <span v-else class="pagination-ellipsis">...</span>
                                    </template>

                                    <!-- 下一页按钮 -->
                                    <button class="btn btn-small" @click="nextPage()" :disabled="areaPagination.currentPage === areaPagination.totalPages">下一页</button>

                                    <!-- 末页按钮 -->
                                    <button class="btn btn-small" @click="goToPage(areaPagination.totalPages)" :disabled="areaPagination.currentPage === areaPagination.totalPages" title="末页">末页</button>
                                </div>
                                <div class="page-size-selector">
                                    每页显示：
                                    <select @change="changePageSize($event.target.value)" :value="areaPagination.pageSize">
                                        <option value="10">10条</option>
                                        <option value="20">20条</option>
                                        <option value="50">50条</option>
                                        <option value="100">100条</option>
                                    </select>
                                </div>
                            </div>
                            <div v-else class="loading">暂无数据</div>
                        </div>
                    </div>
                </main>
            </div>
        </div>

        <!-- 策略管理模态框 -->
        <div v-if="showAddStrategyModal || showEditStrategyModal" class="modal" @click.self="closeStrategyModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{ showEditStrategyModal ? '编辑运费策略' : '新增运费策略' }}</h3>
                    <button class="close-btn" @click="closeStrategyModal">&times;</button>
                </div>
                <form @submit.prevent="submitStrategy">
                    <div class="form-group">
                        <label class="form-label required">策略名称</label>
                        <input type="text" class="form-input" v-model="strategyForm.name" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">计费模式</label>
                        <select class="form-input" v-model="strategyForm.pricingModel" required>
                            <option value="">请选择计费模式</option>
                            <option value="1">首重续重</option>
                            <option value="2">首重续重+重量区间</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">策略描述</label>
                        <textarea class="form-input" v-model="strategyForm.description" rows="3" placeholder="请输入策略的详细描述"></textarea>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeStrategyModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 策略区域映射页面的策略编辑模态框 -->
        <div v-if="showMappingStrategyEditModal" class="modal" @click.self="closeMappingStrategyEditModal">
            <div class="modal-content strategy-edit-modal">
                <div class="modal-header">
                    <h3 class="modal-title">编辑策略 - {{ mappingStrategyForm.name }}</h3>
                    <button class="close-btn" @click="closeMappingStrategyEditModal">&times;</button>
                </div>
                <form @submit.prevent="submitMappingStrategyEdit">
                    <!-- 双栏布局：运送区域和计费规则 -->
                    <div class="strategy-edit-layout">
                        <!-- 左侧：运送区域 -->
                        <div class="shipping-areas-section">
                            <h4>运送区域</h4>
                            <div class="shipping-areas-selector">
                                <div class="areas-header">
                                    <button type="button" class="btn btn-primary btn-small" @click="openAreaSelector">
                                        选择运送区域
                                    </button>
                                    <span class="selected-count">已选择 {{ getSelectedAreasCount() }} 个区域</span>
                                </div>

                                <!-- 区域选择器容器 -->
                                <div class="area-selector-container" style="position: relative;">
                                    <!-- 区域选择器 -->
                                    <div v-if="showMappingAreaSelector" class="area-selector-panel-compact">
                                        <div class="area-selector-header">
                                            <h5>选择运送区域</h5>
                                            <button type="button" class="close-btn" @click="closeMappingAreaSelector">&times;</button>
                                        </div>

                                        <div class="area-selector-content">
                                            <!-- 三级联动面板 -->
                                            <div class="cascader-panel-compact">
                                                <!-- 省份列 -->
                                                <div class="cascader-column-compact">
                                                    <div class="cascader-header-compact">
                                                        <span>省份</span>
                                                        <button type="button" class="btn btn-tiny"
                                                                @click="toggleSelectAllProvinces()"
                                                                :class="{ active: isAllProvincesSelected() }">
                                                            {{ isAllProvincesSelected() ? '取消全选' : '全选' }}
                                                        </button>
                                                    </div>
                                                    <div class="cascader-options-compact">
                                                        <div v-for="province in areaTree" :key="province.id" class="cascader-option-compact"
                                                             :class="{ 'has-children': province && province.children && province.children.length > 0, 'indeterminate': isProvinceIndeterminate(province) }">
                                                            <input type="checkbox" class="cascader-checkbox"
                                                                   :checked="mappingAreaState.selectedProvinces.has(province.id)"
                                                                   @change="toggleMappingProvinceSelection(province)"
                                                                   :disabled="!province || !province.id">
                                                            <span class="cascader-option-label" @click="toggleMappingProvinceExpansion(province)">{{ province && province.name ? province.name : '未知省份' }}</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- 城市列 -->
                                                <div class="cascader-column-compact">
                                                    <div class="cascader-header-compact">
                                                        <span>城市</span>
                                                        <button type="button" class="btn btn-tiny"
                                                                @click="toggleSelectAllCities()"
                                                                :class="{ active: isAllExpandedCitiesSelected() }">
                                                            {{ isAllExpandedCitiesSelected() ? '取消全选' : '全选' }}
                                                        </button>
                                                    </div>
                                                    <div class="cascader-options-compact">
                                                        <template v-for="province in areaTree" :key="'cities-' + province.id">
                                                            <template v-if="mappingAreaState.expandedProvinces.has(province.id)">
                                                                <div v-for="city in province.children" :key="city.id" class="cascader-option-compact"
                                                                     :class="{ 'has-children': city && city.children && city.children.length > 0, 'indeterminate': isCityIndeterminate(city) }">
                                                                    <input type="checkbox" class="cascader-checkbox"
                                                                           :checked="mappingAreaState.selectedCities.has(city.id)"
                                                                           @change="toggleMappingCitySelection(city, province)"
                                                                           :disabled="!city || !city.id">
                                                                    <span class="cascader-option-label" @click="toggleMappingCityExpansion(city)">{{ city && city.name ? city.name : '未知城市' }}</span>
                                                                </div>
                                                            </template>
                                                        </template>
                                                    </div>
                                                </div>

                                                <!-- 区县列 -->
                                                <div class="cascader-column-compact">
                                                    <div class="cascader-header-compact">
                                                        <span>区县</span>
                                                        <button type="button" class="btn btn-tiny"
                                                                @click="toggleSelectAllDistricts()"
                                                                :class="{ active: isAllExpandedDistrictsSelected() }">
                                                            {{ isAllExpandedDistrictsSelected() ? '取消全选' : '全选' }}
                                                        </button>
                                                    </div>
                                                    <div class="cascader-options-compact">
                                                        <template v-for="province in areaTree" :key="'districts-' + province.id">
                                                            <template v-for="city in province.children" :key="'city-districts-' + city.id">
                                                                <template v-if="mappingAreaState.expandedCities.has(city.id)">
                                                                    <div v-for="district in city.children" :key="district.id" class="cascader-option-compact">
                                                                        <input type="checkbox" class="cascader-checkbox"
                                                                               :checked="mappingAreaState.selectedDistricts.has(district.id)"
                                                                               @change="toggleMappingDistrictSelection(district, city, province)">
                                                                        <span class="cascader-option-label">{{ district && district.name ? district.name : '未知区县' }}</span>
                                                                    </div>
                                                                </template>
                                                            </template>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="area-selector-actions">
                                                <button type="button" class="btn" @click="closeMappingAreaSelector">取消</button>
                                                <button type="button" class="btn btn-primary" @click="confirmAreaSelection">确定</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 已选择区域显示 -->
                                <div class="selected-areas-display" v-if="getMappingSelectedAreaTags().length > 0">
                                    <div class="selected-areas-tags">
                                        <div v-for="tag in getMappingSelectedAreaTags()" :key="tag.id" class="area-tag"
                                             :class="tag.type">
                                            <span class="tag-text">{{ tag.text }}</span>
                                            <button type="button" class="tag-remove-btn" @click="removeMappingAreaTag(tag.id, tag.type)">×</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 右侧：计费规则配置 -->
                        <div class="pricing-rules-section">
                            <h4>计费规则配置</h4>
                            <div class="pricing-rules-editor">
                                <table class="pricing-edit-table">
                                    <thead>
                                        <tr>
                                            <th>重量上限(kg)</th>
                                            <th>邮资(元)</th>
                                            <th>首重(kg)</th>
                                            <th>首费(元)</th>
                                            <th>续重(kg)</th>
                                            <th>续费(元)</th>
                                            <th>抛重比</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 调试信息 -->
                                        <tr v-if="(mappingStrategyForm.weightRules || []).length === 0">
                                            <td colspan="8" style="text-align: center; color: #999;">暂无重量规则，点击下方按钮新增</td>
                                        </tr>
                                        <!-- 主数据列表 -->
                                        <template v-for="(rule, index) in (mappingStrategyForm.weightRules || [])" :key="'mapping-rule-' + index + '-' + (rule.id || 'new')">
                                            <!-- 调试行 -->
                                            <tr style="background-color: #e7f3ff; font-size: 11px; color: #666;">
                                                <td colspan="8" style="padding: 2px 4px;">
                                                    调试: 索引{{index}}, ID:{{rule?.id}}, 类型:{{typeof rule}}, 重量上限:{{rule?.upperBound}}
                                                </td>
                                            </tr>
                                            <!-- 实际数据行 -->
                                            <tr class="pricing-rule-row" v-if="rule && typeof rule === 'object'">
                                                <td>
                                                    <input type="number"
                                                           class="table-input"
                                                           v-model.number="rule.upperBound"
                                                           step="0.1"
                                                           min="0.0"
                                                           placeholder="重量上限">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                           class="table-input"
                                                           v-model.number="rule.freight"
                                                           step="0.01"
                                                           min="0"
                                                           placeholder="邮资">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                           class="table-input"
                                                           v-model.number="rule.firstWeightKg"
                                                           step="0.1"
                                                           min="0.0"
                                                           placeholder="首重">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                           class="table-input"
                                                           v-model.number="rule.firstWeightFee"
                                                           step="0.01"
                                                           min="0"
                                                           placeholder="首费">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                           class="table-input"
                                                           v-model.number="rule.additionalWeightKg"
                                                           step="0.1"
                                                           min="0.0"
                                                           placeholder="续重">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                           class="table-input"
                                                           v-model.number="rule.additionalWeightFee"
                                                           step="0.01"
                                                           min="0"
                                                           placeholder="续费">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                           class="table-input"
                                                           v-model.number="rule.volumetricWeightRatio"
                                                           step="1"
                                                           min="0"
                                                           placeholder="抛重比">
                                                </td>
                                                <td>
                                                    <button type="button"
                                                            class="btn btn-small btn-danger"
                                                            @click="removeMappingStrategyWeightRule(index)"
                                                            :disabled="(mappingStrategyForm.weightRules || []).length <= 1"
                                                            title="删除此规则">
                                                        删除
                                                    </button>
                                                </td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>

                                <div class="rule-actions">
                                    <button type="button"
                                            class="btn btn-success btn-small"
                                            @click="addMappingStrategyWeightRule">
                                        + 新增重量规则
                                    </button>
                                    <small class="form-hint">至少需要一条重量规则。抛重比用于计算体积重，常用值为 5000-8000</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="text-align: right; margin-top: 20px;">
                        <button type="button" class="btn" @click="closeMappingStrategyEditModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submittingMappingStrategy">保存策略</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 区域管理模态框 -->
        <div v-if="showAddAreaModal || showEditAreaModal" class="modal" @click.self="closeAreaModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{ showEditAreaModal ? '编辑区域' : '新增区域' }}</h3>
                    <button class="close-btn" @click="closeAreaModal">&times;</button>
                </div>
                <form @submit.prevent="submitArea">
                    <div class="form-group">
                        <label class="form-label required">地址层级</label>
                        <select class="form-input" v-model="areaForm.level" @change="onLevelChange" required>
                            <option value="">请选择层级</option>
                            <option value="1">省级</option>
                            <option value="2">市级</option>
                            <option value="3">区县级</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">省份编码</label>
                        <input type="text" class="form-input" v-model="areaForm.provinceCode" placeholder="例如：310000, 320000, 440000" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">省份名称</label>
                        <input type="text" class="form-input" v-model="areaForm.provinceName" placeholder="例如：上海市, 江苏省, 广东省" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">省份简称</label>
                        <input type="text" class="form-input" v-model="areaForm.provinceShortName" placeholder="例如：沪, 苏, 粤" required>
                    </div>
                    <div v-if="parseInt(areaForm.level) >= 2" class="form-group">
                        <label class="form-label required">城市编码</label>
                        <input type="text" class="form-input" v-model="areaForm.cityCode" placeholder="例如：310100, 320100, 440100" required>
                    </div>
                    <div v-if="parseInt(areaForm.level) >= 2" class="form-group">
                        <label class="form-label required">城市名称</label>
                        <input type="text" class="form-input" v-model="areaForm.cityName" placeholder="例如：上海市, 南京市, 广州市" required>
                    </div>
                    <div v-if="parseInt(areaForm.level) >= 2" class="form-group">
                        <label class="form-label required">城市简称</label>
                        <input type="text" class="form-input" v-model="areaForm.cityShortName" placeholder="例如：京, 穗, 深" required>
                    </div>
                    <div v-if="parseInt(areaForm.level) === 3" class="form-group">
                        <label class="form-label required">区县编码</label>
                        <input type="text" class="form-input" v-model="areaForm.districtCode" placeholder="例如：310101, 320102, 440103" required>
                    </div>
                    <div v-if="parseInt(areaForm.level) === 3" class="form-group">
                        <label class="form-label required">区县名称</label>
                        <input type="text" class="form-input" v-model="areaForm.districtName" placeholder="例如：黄浦区, 秦淮区, 荔湾区" required>
                    </div>
                    <div v-if="parseInt(areaForm.level) === 3" class="form-group">
                        <label class="form-label required">区县简称</label>
                        <input type="text" class="form-input" v-model="areaForm.districtShortName" placeholder="例如：黄浦, 秦淮, 荔湾" required>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeAreaModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 映射管理模态框 -->
        <div v-if="showAddMappingModal" class="modal" @click.self="closeMappingModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">新增策略映射</h3>
                    <button class="close-btn" @click="closeMappingModal">&times;</button>
                </div>
                <form @submit.prevent="submitMapping">
                    <div class="form-group">
                        <label class="form-label required">选择策略</label>
                        <div class="strategy-selector">
                            <input type="text"
                                   class="strategy-search-input"
                                   v-model="strategySearchKeyword"
                                   @input="handleStrategySearch(strategySearchKeyword)"
                                   @focus="showStrategyOptions(strategySearchKeyword)"
                                   @blur="hideStrategyDropdown"
                                   placeholder="输入策略名称搜索...">
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length > 0">
                                <div class="strategy-option"
                                     v-for="strategy in filteredStrategies"
                                     :key="strategy.id"
                                     @mousedown="handleStrategySelection(strategy, 'mappingForm')">
                                    {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                </div>
                            </div>
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length === 0 && strategySearchKeyword">
                                <div class="no-strategy-results">未找到相关策略</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">选择区域</label>
                        <div class="cascader-selector">

                            <!-- 三级联动面板 -->
                            <div class="cascader-panel">
                                <!-- 省份列 -->
                                <div class="cascader-column">
                                    <div class="cascader-header">
                                        <button type="button" class="btn btn-small btn-select-all"
                                                @click="toggleSelectAllProvinces()"
                                                :class="{ active: isAllProvincesSelected() }">
                                            {{ isAllProvincesSelected() ? '取消全选' : '全选省份' }}
                                        </button>
                                    </div>
                                    <div v-for="province in areaTree" :key="province.id" class="cascader-option"
                                         :class="{ 'has-children': province && province.children && province.children.length > 0, 'indeterminate': isProvinceIndeterminate(province) }">
                                        <input type="checkbox" class="cascader-checkbox"
                                               :checked="cascaderState.selectedProvinces.has(province.id)"
                                               @change="toggleProvinceSelection(province)"
                                               :disabled="!province || !province.id">
                                        <span class="cascader-option-label" @click="toggleProvinceExpansion(province)">{{ province && province.name ? province.name : '未知省份' }}</span>
                                    </div>
                                </div>

                                <!-- 城市列 -->
                                <div class="cascader-column">
                                    <div class="cascader-header">
                                        <button type="button" class="btn btn-small btn-select-all"
                                                @click="toggleSelectAllCities()"
                                                :class="{ active: isAllExpandedCitiesSelected() }">
                                            {{ isAllExpandedCitiesSelected() ? '取消全选' : '全选城市' }}
                                        </button>
                                    </div>
                                    <template v-for="province in areaTree" :key="'cities-' + province.id">
                                        <template v-if="cascaderState.expandedProvinces.has(province.id)">
                                            <div v-for="city in province.children" :key="city.id" class="cascader-option"
                                                 :class="{ 'has-children': city && city.children && city.children.length > 0, 'indeterminate': isCityIndeterminate(city) }">
                                                <input type="checkbox" class="cascader-checkbox"
                                                       :checked="cascaderState.selectedCities.has(city.id)"
                                                       @change="toggleCitySelection(city, province)"
                                                       :disabled="!city || !city.id">
                                                <span class="cascader-option-label" @click="toggleCityExpansion(city)">{{ city && city.name ? city.name : '未知城市' }}</span>
                                            </div>
                                        </template>
                                    </template>
                                </div>

                                <!-- 区县列 -->
                                <div class="cascader-column">
                                    <div class="cascader-header">
                                        <button type="button" class="btn btn-small btn-select-all"
                                                @click="toggleSelectAllDistricts()"
                                                :class="{ active: isAllExpandedDistrictsSelected() }">
                                            {{ isAllExpandedDistrictsSelected() ? '取消全选' : '全选区县' }}
                                        </button>
                                    </div>
                                    <template v-for="province in areaTree" :key="'districts-' + province.id">
                                        <template v-for="city in province.children" :key="'city-districts-' + city.id">
                                            <template v-if="cascaderState.expandedCities.has(city.id)">
                                                <div v-for="district in city.children" :key="district.id" class="cascader-option">
                                                    <input type="checkbox" class="cascader-checkbox"
                                                           :checked="cascaderState.selectedDistricts.has(district.id)"
                                                           @change="toggleDistrictSelection(district, city, province)">
                                                    <span class="cascader-option-label">{{ district && district.name ? district.name : '未知区县' }}</span>
                                                </div>
                                            </template>
                                        </template>
                                    </template>
                                </div>
                            </div>

                            <!-- 空状态提示 -->
                            <div v-if="areaTree.length === 0" class="cascader-empty">
                                暂无区域数据
                            </div>

                            <!-- 选中标签显示 - 暂时隐藏 -->
<!--                            <div class="cascader-selected-tags" v-if="getSelectedAreaTags().length > 0">
                                <div v-for="tag in getSelectedAreaTags()" :key="tag.id" class="cascader-tag">
                                    <span class="cascader-tag-text">{{ tag.text }}</span>
                                    <span class="cascader-tag-close" @click="removeSelectedAreaTag(tag.id, tag.type)">×</span>
                                </div>
                            </div>-->

                        </div>
                    </div>
                    <div class="form-group" v-if="filteredWeightRules.length > 0">
                        <label class="form-label required">选择重量规则（多选）</label>
                        <div style="max-height: 200px; overflow-y: auto; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0.5rem;">
                            <label v-for="rule in filteredWeightRules" :key="rule.id" style="display: block; margin-bottom: 0.5rem;">
                                <input type="checkbox" :value="rule.id" v-model="mappingForm.segmentRuleIds" style="margin-right: 0.5rem;">
                                ≤{{ rule.upperBound }}kg, {{ rule.freight }}元
                            </label>
                        </div>
                        <small style="color: #909399;">已选择 {{ mappingForm.segmentRuleIds.length }} 个重量规则</small>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeMappingModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 重量规则模态框 -->
        <div v-if="showAddWeightRuleModal || showEditWeightRuleModal" class="modal" @click.self="closeWeightRuleModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{ showEditWeightRuleModal ? '编辑重量规则' : '新增重量规则' }}</h3>
                    <button class="close-btn" @click="closeWeightRuleModal">&times;</button>
                </div>
                <form @submit.prevent="submitWeightRule">
                    <div class="form-group">
                        <label class="form-label required">策略名称</label>
                        <input type="text" class="form-input" v-model="weightRuleForm.strategyName" readonly
                               style="background-color: #f5f7fa; color: #909399;"
                               placeholder="当前策略名称">
                        <small class="form-hint">策略名称不可修改，默认为当前选中的策略</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">重量上限 (kg)</label>
                        <input type="number" class="form-input" v-model.number="weightRuleForm.upperBound" step="0.1" min="0.0" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">邮资 (元)</label>
                        <input type="number" class="form-input" v-model.number="weightRuleForm.freight" step="0.01" min="0" required>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeWeightRuleModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 策略分配模态框 -->
        <div v-if="showAddAssignmentModal" class="modal" @click.self="closeAssignmentModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">新增策略分配</h3>
                    <button class="close-btn" @click="closeAssignmentModal">&times;</button>
                </div>
                <form @submit.prevent="submitAssignment">
                    <div class="form-group">
                        <label class="form-label required">选择策略</label>
                        <div class="strategy-selector">
                            <input type="text"
                                   class="strategy-search-input"
                                   v-model="strategySearchKeyword"
                                   @input="handleStrategySearch(strategySearchKeyword)"
                                   @focus="showStrategyOptions(strategySearchKeyword)"
                                   @blur="hideStrategyDropdown"
                                   placeholder="输入策略名称搜索...">
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length > 0">
                                <div class="strategy-option"
                                     v-for="strategy in filteredStrategies"
                                     :key="strategy.id"
                                     @mousedown="handleStrategySelection(strategy, 'assignmentForm')">
                                    {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                </div>
                            </div>
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length === 0 && strategySearchKeyword">
                                <div class="no-strategy-results">未找到相关策略</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">仓库编码</label>
                        <input type="text" class="form-input" v-model="assignmentForm.warehouseCode" placeholder="例如：WH001, WH_SHANGHAI, 华东仓, BJ_WAREHOUSE" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">物流公司编码</label>
                        <input type="text" class="form-input" v-model="assignmentForm.logisticsCompanyCode" placeholder="例如：SF(顺丰), YTO(圆通), ZTO(中通), EMS, JD(京东)" required>
                    </div>

                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeAssignmentModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 批量映射模态框 -->
        <div v-if="showBatchMappingModal" class="modal" @click.self="closeBatchMappingModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">批量策略映射</h3>
                    <button class="close-btn" @click="closeBatchMappingModal">&times;</button>
                </div>
                <form @submit.prevent="submitBatchMapping">
                    <div class="form-group">
                        <label class="form-label required">选择策略</label>
                        <div class="strategy-selector">
                            <input type="text"
                                   class="strategy-search-input"
                                   v-model="strategySearchKeyword"
                                   @input="handleStrategySearch(strategySearchKeyword)"
                                   @focus="showStrategyOptions(strategySearchKeyword)"
                                   @blur="hideStrategyDropdown"
                                   placeholder="输入策略名称搜索...">
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length > 0">
                                <div class="strategy-option"
                                     v-for="strategy in filteredStrategies"
                                     :key="strategy.id"
                                     @mousedown="handleStrategySelection(strategy, 'batchMappingForm')">
                                    {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                </div>
                            </div>
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length === 0 && strategySearchKeyword">
                                <div class="no-strategy-results">未找到相关策略</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">选择区域</label>
                        <div class="cascader-selector">

                            <!-- 三级联动面板 -->
                            <div class="cascader-panel">
                                <!-- 省份列 -->
                                <div class="cascader-column">
                                    <div class="cascader-header">
                                        <button type="button" class="btn btn-small btn-select-all"
                                                @click="toggleSelectAllProvinces()"
                                                :class="{ active: isAllProvincesSelected() }">
                                            {{ isAllProvincesSelected() ? '取消全选' : '全选省份' }}
                                        </button>
                                    </div>
                                    <div v-for="province in areaTree" :key="province.id" class="cascader-option"
                                         :class="{ 'has-children': province && province.children && province.children.length > 0, 'indeterminate': isProvinceIndeterminate(province) }">
                                        <input type="checkbox" class="cascader-checkbox"
                                               :checked="cascaderState.selectedProvinces.has(province.id)"
                                               @change="toggleProvinceSelection(province)"
                                               :disabled="!province || !province.id">
                                        <span class="cascader-option-label" @click="toggleProvinceExpansion(province)">{{ province && province.name ? province.name : '未知省份' }}</span>
                                    </div>
                                </div>

                                <!-- 城市列 -->
                                <div class="cascader-column">
                                    <div class="cascader-header">
                                        <button type="button" class="btn btn-small btn-select-all"
                                                @click="toggleSelectAllCities()"
                                                :class="{ active: isAllExpandedCitiesSelected() }">
                                            {{ isAllExpandedCitiesSelected() ? '取消全选' : '全选城市' }}
                                        </button>
                                    </div>
                                    <template v-for="province in areaTree" :key="'cities-' + province.id">
                                        <template v-if="cascaderState.expandedProvinces.has(province.id)">
                                            <div v-for="city in province.children" :key="city.id" class="cascader-option"
                                                 :class="{ 'has-children': city && city.children && city.children.length > 0, 'indeterminate': isCityIndeterminate(city) }">
                                                <input type="checkbox" class="cascader-checkbox"
                                                       :checked="cascaderState.selectedCities.has(city.id)"
                                                       @change="toggleCitySelection(city, province)"
                                                       :disabled="!city || !city.id">
                                                <span class="cascader-option-label" @click="toggleCityExpansion(city)">{{ city && city.name ? city.name : '未知城市' }}</span>
                                            </div>
                                        </template>
                                    </template>
                                </div>

                                <!-- 区县列 -->
                                <div class="cascader-column">
                                    <div class="cascader-header">
                                        <button type="button" class="btn btn-small btn-select-all"
                                                @click="toggleSelectAllDistricts()"
                                                :class="{ active: isAllExpandedDistrictsSelected() }">
                                            {{ isAllExpandedDistrictsSelected() ? '取消全选' : '全选区县' }}
                                        </button>
                                    </div>
                                    <template v-for="province in areaTree" :key="'districts-' + province.id">
                                        <template v-for="city in province.children" :key="'city-districts-' + city.id">
                                            <template v-if="cascaderState.expandedCities.has(city.id)">
                                                <div v-for="district in city.children" :key="district.id" class="cascader-option">
                                                    <input type="checkbox" class="cascader-checkbox"
                                                           :checked="cascaderState.selectedDistricts.has(district.id)"
                                                           @change="toggleDistrictSelection(district, city, province)">
                                                    <span class="cascader-option-label">{{ district && district.name ? district.name : '未知区县' }}</span>
                                                </div>
                                            </template>
                                        </template>
                                    </template>
                                </div>
                            </div>

                            <!-- 空状态提示 -->
                            <div v-if="areaTree.length === 0" class="cascader-empty">
                                暂无区域数据
                            </div>

                            <!-- 选中标签显示 - 暂时隐藏 -->
<!--                            <div class="cascader-selected-tags" v-if="getSelectedAreaTags().length > 0">
                                <div v-for="tag in getSelectedAreaTags()" :key="tag.id" class="cascader-tag">
                                    <span class="cascader-tag-text">{{ tag.text }}</span>
                                    <span class="cascader-tag-close" @click="removeSelectedAreaTag(tag.id, tag.type)">×</span>
                                </div>
                            </div>-->

                        </div>
                        <small style="color: #909399;">已选择 {{ batchMappingForm.areaIds.length }} 个区域</small>
                    </div>
                    <div class="form-group" v-if="batchWeightRules.length > 0">
                        <label class="form-label required">选择重量规则</label>
                        <div style="max-height: 200px; overflow-y: auto; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0.5rem;">
                            <label v-for="rule in batchWeightRules" :key="rule.id" style="display: block; margin-bottom: 0.5rem;">
                                <input type="checkbox" :value="rule.id" v-model="batchMappingForm.segmentRuleIds" style="margin-right: 0.5rem;">
                                ≤{{ rule.upperBound }}kg, {{ rule.freight }}元
                            </label>
                        </div>
                        <small style="color: #909399;">已选择 {{ batchMappingForm.segmentRuleIds.length }} 个重量规则</small>
                    </div>
                    <div v-if="batchMappingForm.areaIds.length > 0 && batchMappingForm.segmentRuleIds.length > 0" class="form-group">
                        <p style="color: #409eff;">预览：将创建 {{ batchMappingForm.areaIds.length * batchMappingForm.segmentRuleIds.length }} 条映射记录</p>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeBatchMappingModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 编辑送达区域映射模态框 -->
        <div v-if="showEditMappingModal" class="modal" @click.self="closeEditMappingModal">
            <div class="modal-content" style="max-width: 800px;">
                <div class="modal-header">
                    <h3 class="modal-title">编辑送达区域映射</h3>
                    <button class="close-btn" @click="closeEditMappingModal">&times;</button>
                </div>
                <form @submit.prevent="submitEditMapping">
                    <div class="form-group">
                        <label class="form-label">策略（不可修改）</label>
                        <select class="form-input" v-model="editMappingForm.strategyId" disabled>
                            <option v-for="strategy in strategies" :key="strategy.id" :value="strategy.id">
                                {{ strategy.name }}
                            </option>
                        </select>
                        <small class="form-hint">编辑时不能修改策略，如需修改请新增映射</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">重量规则（不可修改）</label>
                        <div style="padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; background-color: #f5f7fa;">
                            <strong>≤{{ editMappingForm.upperBound }}kg, {{ editMappingForm.freight }}元</strong>
                        </div>
                        <small class="form-hint">编辑时不能修改重量规则，如需修改请新增映射</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">选择送达区域</label>

                        <!-- 联动功能控制按钮 -->
                        <div class="linkage-control" style="margin-bottom: 12px; padding: 8px 12px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e9ecef;">
                            <label class="linkage-toggle" style="display: flex; align-items: center; cursor: pointer; font-size: 14px; color: #495057;">
                                <input type="checkbox"
                                       v-model="isLinkageEnabled"
                                       checked
                                       @change="() => { console.log('🔗 联动状态变更:', isLinkageEnabled); }"
                                       style="margin-right: 8px; width: 16px; height: 16px; cursor: pointer;">
                                <span class="linkage-label" style="user-select: none;">
                                    <i class="linkage-icon" style="margin-right: 4px;">🔗</i>
                                    启用联动选择
                                </span>
                                <span class="linkage-hint" style="margin-left: 8px; font-size: 12px; color: #6c757d;">
                                    （选中父级时自动选中所有子级）
                                </span>
                            </label>
                        </div>
                        <div class="modern-cascader-container">
                            <!-- 工具栏 -->
                            <div class="cascader-toolbar">
                                <div class="toolbar-buttons">
                                    <button type="button" class="btn btn-small btn-outline" @click="toggleSelectAllProvinces">
                                        <i class="icon-province">🌍</i> {{ isAllProvincesSelected() ? '取消全选省份' : '全选省份' }}
                                    </button>
                                    <button type="button" class="btn btn-small btn-outline" @click="toggleSelectAllCities">
                                        <i class="icon-city">🏙️</i> {{ isAllExpandedCitiesSelected() ? '取消全选城市' : '全选城市' }}
                                    </button>
                                    <button type="button" class="btn btn-small btn-outline" @click="toggleSelectAllDistricts">
                                        <i class="icon-district">🏘️</i> {{ isAllExpandedDistrictsSelected() ? '取消全选区县' : '全选区县' }}
                                    </button>
                                    <button type="button" class="btn btn-small btn-danger-outline" @click="clearAllSelections">
                                        <i class="icon-clear">🗑️</i> 清空选择
                                    </button>
                                </div>
                                <div class="selection-stats">
                                    已选择 <span class="stat-number">{{ getSelectedAreaTags().length }}</span> 个区域
                                </div>
                            </div>

                            <!-- 现代级联选择器 -->
                            <div class="modern-cascader-panel">
                                <!-- 省份面板 -->
                                <div class="cascader-pane provinces-pane">
                                    <div class="pane-header">
                                        <h4>省份/直辖市</h4>
                                        <span class="pane-count">{{ areaTree.length }}</span>
                                    </div>
                                    <div class="pane-content">
                                        <div v-for="province in areaTree"
                                             :key="province.id"
                                             class="area-item province-item"
                                             :class="{
                                                 'expanded': cascaderState.expandedProvinces.has(province.id),
                                                 'selected': cascaderState.selectedProvinces.has(province.id),
                                                 'indeterminate': isProvinceIndeterminate(province)
                                             }">
                                            <div class="item-main">
                                                <div class="item-checkbox">
                                                    <input type="checkbox"
                                                           :checked="cascaderState.selectedProvinces.has(province.id)"
                                                           :indeterminate="isProvinceIndeterminate(province)"
                                                           @change="toggleProvinceSelection(province)">
                                                    <span class="checkmark"
                                                          @click="() => { console.log('🎯 [CHECKMARK] Province checkmark clicked:', province.name); toggleProvinceSelection(province); }"
                                                          @dblclick="() => { console.log('🎯 [DOUBLE-CLICK] Province checkmark double-clicked:', province.name); selectProvinceAndAllChildren(province); }"
                                                          title="单击：选择/取消省份 | 双击：选择所有子级"></span>
                                                </div>
                                                <div class="item-label" @click="toggleProvinceExpansion(province)">
                                                    <span class="item-name">{{ province.name }}</span>
                                                    <span class="item-count" v-if="province.children">{{ province.children.length }}市</span>
                                                </div>
                                                <div class="item-expand" v-if="province.children && province.children.length > 0" @click="toggleProvinceExpansion(province)">
                                                    <i class="expand-icon" :class="{ 'expanded': cascaderState.expandedProvinces.has(province.id) }">▶</i>
                                                </div>
                                            </div>

                                            <!-- 城市面板 -->
                                            <div v-if="cascaderState.expandedProvinces.has(province.id)" class="sub-panel cities-panel">
                                                <div class="sub-panel-header">
                                                    <h5>{{ province.name }} - 城市</h5>
                                                    <span class="sub-panel-count">{{ province.children ? province.children.length : 0 }}</span>
                                                </div>
                                                <div class="sub-panel-content">
                                                    <div v-for="city in province.children"
                                                         :key="city.id"
                                                         class="area-item city-item"
                                                         :class="{
                                                             'expanded': cascaderState.expandedCities.has(city.id),
                                                             'selected': cascaderState.selectedCities.has(city.id),
                                                             'indeterminate': isCityIndeterminate(city)
                                                         }">
                                                        <div class="item-main">
                                                            <div class="item-checkbox">
                                                                <input type="checkbox"
                                                                       :checked="cascaderState.selectedCities.has(city.id)"
                                                                       :indeterminate="isCityIndeterminate(city)"
                                                                       @change="toggleCitySelection(city, province)">
                                                                <span class="checkmark"
                                                                      @click="() => { console.log('🎯 [CHECKMARK] City checkmark clicked:', city.name); toggleCitySelection(city, province); }"
                                                                      @dblclick="() => { console.log('🎯 [DOUBLE-CLICK] City checkmark double-clicked:', city.name); selectCityAndAllDistricts(city, province); }"
                                                                      title="单击：选择/取消城市 | 双击：选择所有区县"></span>
                                                            </div>
                                                            <div class="item-label" @click="toggleCityExpansion(city)">
                                                                <span class="item-name">{{ city.name }}</span>
                                                                <span class="item-count" v-if="city.children">{{ city.children.length }}区</span>
                                                            </div>
                                                            <div class="item-expand" v-if="city.children && city.children.length > 0" @click="toggleCityExpansion(city)">
                                                                <i class="expand-icon" :class="{ 'expanded': cascaderState.expandedCities.has(city.id) }">▶</i>
                                                            </div>
                                                        </div>

                                                        <!-- 区县面板 -->
                                                        <div v-if="cascaderState.expandedCities.has(city.id)" class="sub-panel districts-panel">
                                                            <div class="sub-panel-header">
                                                                <h6>{{ city.name }} - 区县</h6>
                                                                <span class="sub-panel-count">{{ city.children ? city.children.length : 0 }}</span>
                                                            </div>
                                                            <div class="sub-panel-content districts-grid">
                                                                <div v-for="district in city.children"
                                                                     :key="district.id"
                                                                     class="area-item district-item"
                                                                     :class="{ 'selected': cascaderState.selectedDistricts.has(district.id) }">
                                                                    <label class="district-label">
                                                                        <input type="checkbox"
                                                                               :checked="cascaderState.selectedDistricts.has(district.id)"
                                                                               @change="toggleDistrictSelection(district, city, province)">
                                                                        <span class="checkmark-small"></span>
                                                                        <span class="district-name">{{ district.name }}</span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 已选择区域预览 -->
                            <div class="selected-preview" v-if="getSelectedAreaTags().length > 0">
                                <div class="preview-header">
                                    <h4><i class="icon-selected">✅</i> 已选择的区域</h4>
                                    <span class="selected-count">{{ getSelectedAreaTags().length }} 个</span>
                                </div>
                                <div class="selected-tags">
                                    <div v-for="tag in getSelectedAreaTags()"
                                         :key="tag.id"
                                         class="selected-tag"
                                         :class="tag.type">
                                        <span class="tag-icon">{{ tag.type === 'province' ? '🌍' : tag.type === 'city' ? '🏙️' : '🏘️' }}</span>
                                        <span class="tag-text">{{ tag.text }}</span>
                                        <button type="button"
                                                class="tag-remove-btn"
                                                @click="removeSelectedAreaTag(tag.id, tag.type)"
                                                title="移除此区域">
                                            ✕
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeEditMappingModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">保存</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 批量分配模态框 -->
        <div v-if="showBatchAssignmentModal" class="modal" @click.self="closeBatchAssignmentModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">批量策略分配</h3>
                    <button class="close-btn" @click="closeBatchAssignmentModal">&times;</button>
                </div>
                <form @submit.prevent="submitBatchAssignment">
                    <div class="form-group">
                        <label class="form-label required">选择策略</label>
                        <div class="strategy-selector">
                            <input type="text"
                                   class="strategy-search-input"
                                   v-model="strategySearchKeyword"
                                   @input="handleStrategySearch(strategySearchKeyword)"
                                   @focus="showStrategyOptions(strategySearchKeyword)"
                                   @blur="hideStrategyDropdown"
                                   placeholder="输入策略名称搜索...">
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length > 0">
                                <div class="strategy-option"
                                     v-for="strategy in filteredStrategies"
                                     :key="strategy.id"
                                     @mousedown="handleStrategySelection(strategy, 'batchAssignmentForm')">
                                    {{ strategy && strategy.name ? strategy.name : '未知策略' }}
                                </div>
                            </div>
                            <div class="strategy-dropdown" v-if="showStrategyDropdown && filteredStrategies.length === 0 && strategySearchKeyword">
                                <div class="no-strategy-results">未找到相关策略</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">仓库编码</label>
                        <textarea class="form-input"
                                  v-model="batchAssignmentForm.warehouseCodesText"
                                  rows="3"
                                  placeholder="请输入仓库编码，多个用逗号分隔，如：WH001,WH002,WH003"
                                  required></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">物流公司编码</label>
                        <textarea class="form-input"
                                  v-model="batchAssignmentForm.logisticsCompanyCodesText"
                                  rows="3"
                                  placeholder="请输入物流公司编码，多个用逗号分隔，如：YTO,STO,ZTO"
                                  required></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <select class="form-input" v-model="batchAssignmentForm.status">
                            <option value="1">启用</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                    <div v-if="getBatchAssignmentPreviewCount() > 0" class="form-group">
                        <p style="color: #409eff;">预览：将创建 {{ getBatchAssignmentPreviewCount() }} 条分配记录</p>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeBatchAssignmentModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- V3策略编辑模态框 -->
        <div v-if="showV3StrategyEditModal" class="modal" @click.self="closeV3StrategyEditModal">
            <div class="modal-content v3-strategy-edit-modal">
                <div class="modal-header">
                    <h3 class="modal-title">编辑策略 - {{ v3StrategyEditForm.name }}</h3>
                    <button class="close-btn" @click="closeV3StrategyEditModal">&times;</button>
                </div>
                <form @submit.prevent="submitV3StrategyEdit">
                    <!-- 策略编辑布局：双栏设计 -->
                    <div class="v3-strategy-edit-layout">
                        <!-- 左侧：运送区域 -->
                        <div class="v3-shipping-areas-section">
                            <h4>运送区域</h4>
                            <div class="v3-areas-selector">
                                <div class="areas-header">
                                    <button type="button" class="btn btn-primary btn-small" @click="openV3AreaSelector">
                                        选择运送区域
                                    </button>
                                    <span class="selected-count">已选择 {{ getV3SelectedAreasCount() }} 个区域</span>
                                </div>

                                <!-- 已选择区域显示 -->
                                <div class="selected-areas-display" v-if="v3SelectedAreaTags && v3SelectedAreaTags.length > 0">
                                    <div class="selected-areas-tags">
                                        <div v-for="tag in v3SelectedAreaTags" :key="tag.id" class="area-tag"
                                             :class="tag.type">
                                            <span class="tag-text">{{ tag.text }}</span>
                                            <button type="button" class="tag-remove-btn" @click="removeV3AreaTag(tag.id, tag.type)">×</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 右侧：计费规则配置 -->
                        <div class="v3-pricing-rules-section">
                            <h4>计费规则配置</h4>
                            <div class="v3-pricing-rules-editor">
                                <table class="v3-pricing-edit-table">
                                    <thead>
                                        <tr>
                                            <th>重量上限(kg)</th>
                                            <th>邮资(元)</th>
                                            <th>首重(kg)</th>
                                            <th>首费(元)</th>
                                            <th>续重(kg)</th>
                                            <th>续费(元)</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-if="(v3StrategyEditForm.weightRules || []).length === 0">
                                            <td colspan="7" style="text-align: center; color: #999;">暂无重量规则，点击下方按钮新增</td>
                                        </tr>
                                        <tr v-for="(rule, index) in (v3StrategyEditForm.weightRules || [])" :key="'v3-rule-' + index + '-' + (rule.id || 'new')">
                                            <td>
                                                <input type="number"
                                                       class="table-input"
                                                       v-model.number="rule.upperBound"
                                                       step="0.1"
                                                       min="0.0"
                                                       placeholder="重量上限">
                                            </td>
                                            <td>
                                                <input type="number"
                                                       class="table-input"
                                                       v-model.number="rule.freight"
                                                       step="0.01"
                                                       min="0"
                                                       placeholder="邮资">
                                            </td>
                                            <td>
                                                <input type="number"
                                                       class="table-input"
                                                       v-model.number="rule.firstWeightKg"
                                                       step="0.1"
                                                       min="0.0"
                                                       placeholder="首重">
                                            </td>
                                            <td>
                                                <input type="number"
                                                       class="table-input"
                                                       v-model.number="rule.firstWeightFee"
                                                       step="0.01"
                                                       min="0"
                                                       placeholder="首费">
                                            </td>
                                            <td>
                                                <input type="number"
                                                       class="table-input"
                                                       v-model.number="rule.additionalWeightKg"
                                                       step="0.1"
                                                       min="0.0"
                                                       placeholder="续重">
                                            </td>
                                            <td>
                                                <input type="number"
                                                       class="table-input"
                                                       v-model.number="rule.additionalWeightFee"
                                                       step="0.01"
                                                       min="0"
                                                       placeholder="续费">
                                            </td>
                                            <td>
                                                <button type="button"
                                                        class="btn btn-small btn-danger"
                                                        @click="removeV3StrategyWeightRule(index)"
                                                        title="删除此规则">
                                                    删除
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="rule-actions">
                                    <button type="button"
                                            class="btn btn-success btn-small"
                                            @click="addV3StrategyWeightRule">
                                        + 新增重量规则
                                    </button>
                                    <small class="form-hint">至少需要一条重量规则</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="text-align: right; margin-top: 20px;">
                        <button type="button" class="btn" @click="closeV3StrategyEditModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submittingV3Strategy">保存策略</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- V3区域选择器模态框 -->
        <div v-if="showV3AreaSelector" class="v3-area-selector-modal" @click.self="closeV3AreaSelector">
            <div class="modal-content v3-area-selector-modal">
                <div class="modal-header">
                    <h3 class="modal-title">选择运送区域</h3>
                    <button class="close-btn" @click="closeV3AreaSelector">&times;</button>
                </div>

                <div class="v3-area-selector-content">
                    <!-- 三级联动面板 -->
                    <div class="v3-cascader-panel">
                        <!-- 省份列 -->
                        <div class="v3-cascader-column">
                            <div class="v3-cascader-header">
                                <span>全选省份</span>
                                <button type="button" class="btn btn-tiny" @click="toggleSelectAllV3Provinces()">
                                    {{ isAllV3ProvincesSelected() ? '取消全选' : '全选' }}
                                </button>
                            </div>
                            <div class="v3-cascader-options">
                                <div v-for="province in areaTree" :key="province.id" class="v3-cascader-option">
                                    <input type="checkbox"
                                           :checked="v3AreaState.selectedProvinces.has(province.id)"
                                           @change="toggleV3ProvinceSelection(province)">
                                    <span class="v3-option-label">{{ province.name }}</span>
                                    <button v-if="province.children && province.children.length > 0"
                                            type="button"
                                            class="expand-btn"
                                            @click="toggleV3ProvinceExpansion(province)">
                                        {{ v3AreaState.expandedProvinces.has(province.id) ? '-' : '+' }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 城市列 -->
                        <div class="v3-cascader-column">
                            <div class="v3-cascader-header">
                                <span>全选市</span>
                                <button type="button" class="btn btn-tiny" @click="toggleSelectAllV3Cities()">
                                    {{ isAllV3CitiesSelected() ? '取消全选' : '全选' }}
                                </button>
                            </div>
                            <div class="v3-cascader-options">
                                <template v-for="province in areaTree" :key="'cities-' + province.id">
                                    <template v-if="v3AreaState.expandedProvinces.has(province.id)">
                                        <div v-for="city in province.children" :key="city.id" class="v3-cascader-option">
                                            <input type="checkbox"
                                                   :checked="v3AreaState.selectedCities.has(city.id)"
                                                   @change="toggleV3CitySelection(city, province)">
                                            <span class="v3-option-label">{{ city.name }}</span>
                                            <button v-if="city.children && city.children.length > 0"
                                                    type="button"
                                                    class="expand-btn"
                                                    @click="toggleV3CityExpansion(city)">
                                                {{ v3AreaState.expandedCities.has(city.id) ? '-' : '+' }}
                                            </button>
                                        </div>
                                    </template>
                                </template>
                            </div>
                        </div>

                        <!-- 区县列 -->
                        <div class="v3-cascader-column">
                            <div class="v3-cascader-header">
                                <span>全选区县</span>
                                <button type="button" class="btn btn-tiny" @click="toggleSelectAllV3Districts()">
                                    {{ isAllV3DistrictsSelected() ? '取消全选' : '全选' }}
                                </button>
                            </div>
                            <div class="v3-cascader-options">
                                <template v-for="province in areaTree" :key="'districts-' + province.id">
                                    <template v-for="city in province.children" :key="'city-districts-' + city.id">
                                        <template v-if="v3AreaState.expandedCities.has(city.id)">
                                            <div v-for="district in city.children" :key="district.id" class="v3-cascader-option">
                                                <input type="checkbox"
                                                       :checked="v3AreaState.selectedDistricts.has(district.id)"
                                                       @change="toggleV3DistrictSelection(district, city, province)">
                                                <span class="v3-option-label">{{ district.name }}</span>
                                            </div>
                                        </template>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>

                    <!-- 选中区域预览 -->
                    <div class="v3-selected-preview" v-if="getV3SelectedAreasCount() > 0">
                        <div class="preview-header">
                            <h4>已选择的区域</h4>
                            <span class="selected-count">{{ getV3SelectedAreasCount() }} 个</span>
                        </div>
                        <div class="selected-summary">
                            <span v-if="v3AreaState.selectedProvinces.size > 0">省份: {{ v3AreaState.selectedProvinces.size }}个</span>
                            <span v-if="v3AreaState.selectedCities.size > 0">城市: {{ v3AreaState.selectedCities.size }}个</span>
                            <span v-if="v3AreaState.selectedDistricts.size > 0">区县: {{ v3AreaState.selectedDistricts.size }}个</span>
                        </div>
                    </div>

                    <div class="v3-area-selector-actions">
                        <button type="button" class="btn" @click="closeV3AreaSelector">取消</button>
                        <button type="button" class="btn btn-primary" @click="confirmV3AreaSelection">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- V3计费规则编辑模态框 -->
        <div v-if="showV3PricingRulesModal" class="modal" @click.self="closeV3PricingRulesModal">
            <div class="modal-content v3-pricing-rules-modal">
                <div class="modal-header">
                    <h3 class="modal-title">编辑计费规则</h3>
                    <button class="close-btn" @click="closeV3PricingRulesModal">&times;</button>
                </div>

                <div class="v3-pricing-rules-content">
                    <div class="pricing-form-section">
                        <div class="section-header">
                            <h4>重量区间规则</h4>
                            <button type="button" class="btn btn-success btn-small" @click="addV3PricingWeightRule">
                                + 新增重量规则
                            </button>
                        </div>

                        <div class="weight-rules-table" v-if="v3PricingRulesForm.weightRules.length > 0">
                            <table class="v3-pricing-edit-table">
                                <thead>
                                    <tr>
                                        <th>重量上限(kg)</th>
                                        <th>区间邮资(元)</th>
                                        <th>首重(kg)</th>
                                        <th>首费(元)</th>
                                        <th>续重(kg)</th>
                                        <th>续费(元)</th>
                                        <th>抛重比</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(rule, index) in v3PricingRulesForm.weightRules" :key="index">
                                        <td>
                                            <input type="number" class="table-input" v-model.number="rule.upperBound"
                                                   step="0.1" min="0.0" required>
                                        </td>
                                        <td>
                                            <input type="number" class="table-input" v-model.number="rule.freight"
                                                   step="0.01" min="0" required>
                                        </td>
                                        <td>
                                            <input type="number" class="table-input" v-model.number="rule.firstWeightKg"
                                                   step="0.1" min="0.0" placeholder="首重">
                                        </td>
                                        <td>
                                            <input type="number" class="table-input" v-model.number="rule.firstWeightFee"
                                                   step="0.01" min="0" placeholder="首费">
                                        </td>
                                        <td>
                                            <input type="number" class="table-input" v-model.number="rule.additionalWeightKg"
                                                   step="0.1" min="0.0" placeholder="续重">
                                        </td>
                                        <td>
                                            <input type="number" class="table-input" v-model.number="rule.additionalWeightFee"
                                                   step="0.01" min="0" placeholder="续费">
                                        </td>
                                        <td>
                                            <input type="number" class="table-input" v-model.number="rule.volumetricWeightRatio"
                                                   step="1" min="0" placeholder="抛重比">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-small btn-danger"
                                                    @click="removeV3PricingWeightRule(index)">
                                                删除
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div v-else class="empty-rules">
                            <p>暂无重量规则，请点击上方按钮添加</p>
                        </div>
                    </div>

                    <div class="v3-pricing-rules-actions">
                        <button type="button" class="btn" @click="closeV3PricingRulesModal">取消</button>
                        <button type="button" class="btn btn-primary" @click="saveV3PricingRules" :disabled="submittingV3PricingRules">保存计费规则</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 重量区间规则编辑模态框 -->
        <div v-if="showAddWeightSegmentModal || showEditWeightSegmentModal" class="modal" @click.self="closeWeightSegmentModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{ showEditWeightSegmentModal ? '编辑重量区间规则' : '新增重量区间规则' }}</h3>
                    <button class="close-btn" @click="closeWeightSegmentModal">&times;</button>
                </div>
                <form @submit.prevent="submitWeightSegmentRule">
                    <div class="form-group">
                        <label class="form-label required">重量上限 (kg)</label>
                        <input type="number" class="form-input" v-model.number="weightSegmentForm.upperBound"
                               step="0.1" min="0.0" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">区间资费 (元)</label>
                        <input type="number" class="form-input" v-model.number="weightSegmentForm.freight"
                               step="0.01" min="0" required>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn" @click="closeWeightSegmentModal">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                    </div>
                </form>
            </div>
        </div>


    <!-- 复制策略弹框 -->
    <div v-if="showCopyStrategyModal" class="modal" @click.self="closeCopyStrategyModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>复制并新建策略</h3>
                <button class="close-btn" @click="closeCopyStrategyModal">×</button>
            </div>
            <form @submit.prevent="submitCopyStrategy">
                <!-- 显示原策略信息 -->
                <div class="form-group" v-if="currentStrategyForCopy">
                    <label class="form-label">原策略名称</label>
                    <input type="text" class="form-input" :value="currentStrategyForCopy.name" readonly>
                </div>
                <div class="form-group" v-if="currentStrategyForCopy">
                    <label class="form-label">计费模式</label>
                    <input type="text" class="form-input" :value="currentStrategyForCopy.pricingModel === 1 ? '首重续重' : '首重续重+重量区间'" readonly>
                </div>
                <div class="form-group" v-if="currentStrategyForCopy">
                    <label class="form-label required">新策略名称</label>
                    <input type="text" class="form-input" v-model="copyStrategyForm.newName" required>
                </div>
                <div class="form-group" v-if="currentStrategyForCopy">
                    <label class="form-label">新策略描述</label>
                    <textarea class="form-input" v-model="copyStrategyForm.description" rows="3"></textarea>
                </div>
                <div style="text-align: right;">
                    <button type="button" class="btn" @click="closeCopyStrategyModal">取消</button>
                    <button type="submit" class="btn btn-primary" :disabled="submitting">确定</button>
                </div>
            </form>
        </div>
    </div>





</div>

<!-- Global error handling -->
    <script>
        // Global error handling to prevent third-party script errors from affecting our app
        window.addEventListener('error', function(event) {
            // Only log errors from our application, ignore third-party script errors
            if (event.filename && (event.filename.includes('index.html') || event.filename.includes('localhost'))) {
                console.error('Application Error:', event.error);
            }
            // Prevent the error from breaking the application
            return true;
        });

        window.addEventListener('unhandledrejection', function(event) {
            console.error('Unhandled Promise Rejection:', event.reason);
            // Prevent the error from breaking the application
            event.preventDefault();
        });
    </script>

    <!-- 整合版本应用 -->
    <!-- 全局配置文件 - 必须在所有其他JS文件之前加载 -->
    <script src="js/freight-config.js"></script>
    <!-- 工具函数和API服务 - 必须早期加载 -->
    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <!-- 其他模块 -->
    <script src="js/area-cache-manager.js"></script>
    <script src="js/v3-strategy-config.js"></script>
    <script src="js/strategy-area-configuration.js"></script>
    <script src="js/strategy-management.js"></script>
    <script src="js/mapping-management.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
